<!--  -->
<template>
  <div class="scroll-wrapper" ref="scroll">
    <div class="scroll-content">
      <div
        class="scroll-item"
        v-for="(item, index) in listData"
        :key="index"
        @click="clickHandler(item)"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import BScroll from "@better-scroll/core";
import { listData } from "../data/testdata";

export default {
  data() {
    return {
      listData,
    };
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.bs.destroy();
  },
  methods: {
    init() {
      this.bs = new BScroll(this.$refs.scroll, {
        probeType: 3,
        click: true,
      });
      this.bs.on("scrollStart", () => {
        console.log("scrollStart-");
      });
      this.bs.on("scroll", ({ y }) => {
        console.log("scrolling-" + y);
      });
      this.bs.on("scrollEnd", (pos) => {
        console.log(pos);
      });
    },
    clickHandler({ id, title }) {
      console.log(id, title);
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.scroll-wrapper {
  height: 100vh;
  position: relative;
  overflow: hidden;
  padding-top: 60px;
  box-sizing: border-box;
  .scroll-item {
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    text-align: center;
    &:nth-child(2n) {
      background-color: #f3f5f7;
    }
    &:nth-child(2n + 1) {
      background-color: #42b983;
    }
  }
}
</style>
